<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <p>编号: <input type="text" v-model="searchCondition.id"><button @click="searchId">搜索</button></p>
        <p>性别: <input type="text" v-model="searchCondition.gender"><button @click="searchGender">搜索</button></p>
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <tr v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.gender}}</td>
                <td>{{user.phone}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    users: [],
                    searchCondition: {
                        id: "",
                        gender: ""
                    }
                }
            },
            methods: {
                searchId() {
                    // 发送axios请求
                    axios.get("http://localhost:8080/springboot_vue/user/getUserByIdv", {
                        params: {
                            id: this.searchCondition.id
                        }
                    }).then(res => {
                        // 存储data
                        this.users = [res.data];
                    })
                },
                searchGender() {
                    // 发送axios请求
                    axios.get("http://localhost:8080/springboot_vue/user/getAllByGender", {
                        params: {
                            gender: this.searchCondition.gender
                        }
                    }).then(res => {
                        // 存储data
                        this.users = res.data;
                    })
                }
            },
            mounted() {
                // 发送axios请求
                axios.get("http://localhost:8080/springboot_vue/user/getAll").then(res => {
                    // 存储data
                    this.users = res.data;
                }).catch(err => {
                    console.log(err);
                });
            }
        }).mount("#app");
    </script>

</body>

</html>